<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四个顶点</title>
		<style type="text/css">
			a{text-decoration: none;}
			#link{
				height: 320px;
				width: 320px;
				border: 1px solid  red;
				padding: 10px;
			}
			#link a{
				height: 100px;
				width: 100px;
				line-height: 100px;
				font-size: 20px;
				background-color: pink;
				display: block;
				color:black;
				position: relative;
				text-align: center;
			}
			#link a:nth-of-type(2)
			{
				left: 200px; 
				top:-100px;
			}
			/*#link a:nth-of-type(3)
			{
				right: -100px; 
				bottom: 200px;
			}*/
			#link a:nth-of-type(4)
			{
				left: 200px; 
				top: -100px;
			}
			#link a:nth-of-type(5)
			{
				left: 100px; 
				top: -300px;
			}
			#link a:hover{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="link">
			<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a>
		</div>
	</body>
</html>
